<template>
  <div id="radio">
    <div class="main">
      <!-- ----------------左边---------------------------------- -->
      <div class="radio-left-1">
        <div
          class="radio-left"
          v-for="(item, index) in grouplist"
          key="id"
          @click="goRadio(index)"
          :class="isShow === true ? `.radio-current` : ''"
        >
          <a class="radio_item">{{ item.name }}</a>
        </div>
      </div>
      <!-- ---------------右边---------------------------------------- -->
      <div class="mod-radio">
        <div
          v-for="(item, index) in grouplist"
          :key="index"
          class="radio-div"
          ref="radios"
        >
          <h2 class="radio__tit">{{ item.name }}</h2>
          <div class="div"></div>
          <div class="mod_radio_list" @click="goRadioPlay">
            <ul
              class="radio_list__list"
              v-for="items in item.radioList"
              :key="items.id"
            >
              <li class="radio_list__item">
                <div class="radio-bg">
                  <div class="radio_list__item_box">
                    <div class="radio_list__cover mod_cover">
                      <a class="js_radio">
                        <img
                          alt="个性电台"
                          :src="items.radioImg"
                          class="radio_list__pic" /><i
                          class="mod_cover__mask"
                        ></i
                        ><i class="mod_cover__icon_play"></i
                      ></a>
                    </div>
                  </div>
                  <i class="bofang"></i>
                </div>
                <h4>
                  <span class="radio_list__title_txt"
                    ><a class="radio-text" title="个性电台">{{
                      items.radioName
                    }}</a></span
                  >
                </h4>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "RS",
};
</script>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { getRadioListsApi } from "@/api/radio";
import { useRouter } from "vue-router";

const grouplist = ref<any>([]);
const radios = ref();
const router = useRouter();

/**********获取列表数据**************/
onMounted(async () => {
  const res = await getRadioListsApi();
  grouplist.value = res.data.data.groupList;
});
/***************菜单锚点***************************/
//移入添加这个类名 .radio-div-vido
//点击添加类名 .radio-current
//点击按钮跳转 页面
const data = {
  isShow: true,
  vidoShow: `.radio-div-vido`,
};
const goRadio = (index: number) => {
  (data.isShow = true),
    radios.value[index].scrollIntoView({ behavior: "smooth" });
  // (radio as Element).scrollIntoView({ behavior: "smooth" })
};
const vidoShow = (e) => {
  console.log(e.target);
};
/************播放页面******************/
const goRadioPlay = () => {
  router.push({
    path: "/ly/vidoPlay",
  });
};
</script>

<style scoped>
.main {
  width: 1200px;
  margin: 0 auto;
  position: relative;
  background-color: #f7f7f7;
}

.radio-left-1 {
  position: fixed;
}

.radio-left {
  background-image: url("./image/qq音乐radio_sidebar.png");
  background-repeat: no-repeat;
}

.radio-current {
  color: #31c27c;
}

.radio_item {
  position: relative;
  display: block;
  padding-left: 63px;
  line-height: 59px;
  font-size: 15px;
}

.radio_item:hover {
  color: #31c27c;
}

.radio-div {
  position: relative;
}

.radio-current:after {
  content: "";
  position: absolute;
  height: 1px;
  width: 37px;
  overflow: hidden;
  left: 0;
  top: 50%;
  background-color: #31c27c;
}

.mod-radio {
  margin-left: 200px;
  width: 1200px;
}

h2 {
  padding: 20px 40px;
  font-size: 16px;
  color: #ccc;
  font-weight: 300;
}

.div {
  width: 900px;
  height: 1px;
  background-color: #ccc;
  position: absolute;
  top: 30px;
  left: 100px;
}

.radio_list__item {
  width: 243.75px;
  height: 260.75px;
  padding-bottom: 40px;
  position: relative;
  tranform: scale(0.5);
}

.radio-bg:hover::after {
  background-color: rgba(1, 1, 1, 0.3);
}

.radio-bg::after {
  content: "";
  display: block;
  z-index: 100;
  width: 223px;
  height: 223px;
  position: absolute;
  background-color: rgba(1, 1, 1, 0);
  top: 0;
  left: 0%;
}

.bofang {
  content: "";
  background-image: url("./image/播放cover_play@2x.png");
  background-size: 100% 100%;
  position: absolute;
  left: 25%;
  top: 20%;
  width: 70px;
  height: 70px;
  opacity: 0;
  z-index: 200;
  transition-property: all;
  transition-duration: 1s;
}

.radio-bg:hover .bofang {
  opacity: 1;
  width: 100px;
  height: 100px;
}

ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
}

.mod_radio_list .radio_list__item_box {
  position: relative;
  margin-right: 20px;
}

.mod_radio_list .radio_list__item {
  float: left;
  padding-bottom: 44px;
  overflow: hidden;
}

.mod_radio_list .radio_list__cover {
  position: relative;
  display: block;
  overflow: hidden;
  padding-top: 100%;
  margin-bottom: 15px;
}

a {
  color: #000;
  cursor: pointer;
  text-decoration: none;
}

.mod_radio_list .radio_list__pic {
  position: absolute;
  top: 0;
  right: -40px;
  transition-property: all;
  transition-duration: 1s;
}

.radio_list__item:hover .radio_list__pic {
  transform: scale(1.1);
}

.mod_radio_list {
  overflow: hidden;
}

.mod_cover__mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0;
}

.radio-text {
  font-size: 14px;
}

.radio-text:hover {
  font-size: 14px;
  cursor: default;
  color: #31c27c;
}
</style>
